<template>
    <div>
        <!-- 顶部搜索框 -->
        <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" shape="round">
            <template #left>
                <van-icon name="arrow-left" @click="$router.push('/home')" />
            </template>
            <template #action>
                <div @click="find" class="searchText">搜索</div>
            </template>
        </van-search>

        <!-- 历史记录和热门搜素tag组件 -->
        <div class="conbox">
            <div class="box1">
                <span>历史记录</span>
                <span class="hidden">隐藏</span>
            </div>
            <van-tag color="#ffe1e1" text-color="#ad0000" v-for="item in HAndHArr">{{ item.keyword }}</van-tag>
        </div>
        <div class="conbox">
            <div class="box1">
                <span>热门搜索</span>
                <span class="hidden">隐藏</span>
            </div>
            <van-tag color="#ffe1e1" text-color="#ad0000" v-for="item in HAndHArr">{{ item.keyword }}</van-tag>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, defineProps, defineEmits } from 'vue'
// 引入搜索页接口
import { historyandHotApi, searchlistApi } from '@/api/searchApi'
// 搜索框双向绑定的数据
let value = ref('')
// 历史记录和热门搜索数组
let HAndHArr = ref<string[]>()
// 页码,默认值为1
let count = ref<number>(1)
// 每页显示个数,默认值为10
let limitNum = ref<number>(10)
// 搜索的关键词
let keyword = ref('')
// 调用历史记录和热门搜索接口
historyandHotApi().then((res: any) => {
    console.log('history', res);
    HAndHArr.value = res.data

})
interface search {
    count: number,
    limitNum: number,
    keyword: string
}
function onSearch() {
    let values: search = {
        count:count.value,
        limitNum:limitNum.value,
        keyword:keyword.value
    }
    // 搜索框回车时触发，调用搜索接口
    searchlistApi(values).then((res: any) => {
        console.log('搜索列表',res);
        
    })

}
function find() {

}
</script>
<style scoped lang="scss">
.conbox {
    padding: 5px 15px;

    .box1 {
        height: 28px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;

        .hidden {
            font-size: 14px;
            color: #969799;
        }
    }

    .van-tag {
        padding: 3px 6px;
        margin: 6px;
    }
}
</style>